<template>
  <div>
    <!--  头部开始-->
    <el-affix :offset="0">
      <div class="navbar">
        <el-menu
          :default-active="router.currentRoute.value.path"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
        >
          <el-menu-item index="0">
            <img class="logo-img" src="@/assets/shop.png" alt="" />
            <span class="menu-title">{{ $t("bmanager.ShoppingMall") }}</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <img
                src="../../assets/img/touxiang.jpeg"
                alt=""
                class="avatar-img"
              />
              {{ data.user.username }}
            </template>
            <el-menu-item index="2-1" @click="GoToUserDet.goToUserDetails">
              <el-icon>
                <User />
              </el-icon>
              {{ $t("bmanager.UserDetails") }}
            </el-menu-item>
            <el-menu-item
              index="2-2"
              @click="GoToUserLocation.goToUserLocation"
            >
              <el-icon>
                <Location />
              </el-icon>
              {{ $t("bmanager.MyLocations") }}
            </el-menu-item>
            <el-sub-menu index="2-3">
              <template #title>
                <el-icon>
                  <Open />
                </el-icon>
                {{ $t("bmanager.SwitchLanguage") }}
              </template>
              <el-menu-item index="2-3-1" @click="SwitchLanguage('zh')">
                中文
              </el-menu-item>
              <el-menu-item index="2-3-2" @click="SwitchLanguage('en')">
                English
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="2-4" @click="logout">
              <el-icon>
                <SwitchButton />
              </el-icon>
              {{ $t("bmanager.Logout") }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </el-affix>
    <!--  头部结束-->
    <div class="wrapper">
      <div
        class="background"
        :style="{ backgroundImage: `url(${shopBackImg})` }"
      ></div>
      <div class="content-container">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import shopBackImg from "@/assets/img/shop_backimg.jpg";
import router from "@/router/index.js";
import { User, SwitchButton, Location, Open } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const SwitchLanguage = (type) => {
  locale.value = type;
  localStorage.setItem("lang", type);
};

const data = reactive({
  img: shopBackImg, // 初始化背景图
  user: JSON.parse(localStorage.getItem("xm-pro-user")), //字符串转为json对象
});
const logout = () => {
  localStorage.removeItem("xm-pro-user");
  location.href = "/login";
};

// 使用 reactive 封装 router.push 方法
const GoToUserDet = reactive({
  goToUserDetails: () => {
    router.push({ path: "/userdet", name: "UserDet" });
  },
});
//前往地址管理页面
const GoToUserLocation = reactive({
  goToUserLocation: () => {
    router.push({ path: "/userlocation", name: "UserLocation" });
  },
});
</script>

<style scoped>
.wrapper {
  position: relative;
  min-height: 100vh; /* 使背景图覆盖整个视口 */
  overflow: hidden; /* 防止背景图溢出 */
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(10px); /* 设置模糊效果，可以调整模糊的像素值 */
  z-index: -1; /* 确保背景图在内容的下面 */
}

.content-container {
  position: relative;
  width: 90%;
  margin: 10px auto;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  min-height: 500px; /* 可以根据需要调整此值 */
  z-index: 1; /* 确保内容在背景图的上面 */
}

.el-menu .is-active {
  background-color: #eef4ff !important;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.navbar {
  height: 50px;
  background-color: #f0e6ff;
}

.logo-img,
.avatar-img {
  width: 40px;
  height: 40px;
  padding-right: 5px;
}

.menu-title {
  font-size: 30px;
  font-weight: bold;
  color: black;
  margin-left: 10px;
}
</style>
